<template>
  <div>
    <div class="info-content">
      <div class="info-content-item">
          <span class="label">单据号:</span>
          <span class="value">{{props.content?.no}}</span>
      </div>
      <div class="info-content-item">
          <span class="label">报销内容:</span>
          <span class="value">{{props.content?.title}}</span>
      </div>
      <div class="info-content-item">
          <span class="label">报销项目:</span>
          <span class="value">{{props.content?.no}}</span>
      </div>
      <div class="info-content-item">
          <span class="label">报销日期:</span>
          <span class="value">{{props.content?.project_name}}</span>
      </div>
      <div class="info-content-item">
          <span class="label">报销类目:</span>
          <span class="value">{{props.content?.feeitem_name}}</span>
      </div>
      <div class="info-content-item">
          <span class="label">报销金额:</span>
          <span class="value">{{props.content?.amount}}</span>
      </div>
      <div class="info-content-item">
          <span class="label">明细:</span>
          <span class="value">{{props.content?.detail}}</span>
      </div>
      <div class="info-content-item">
          <span class="label">图片:</span>
          <div class="value">
            <div class="images-item" :key="index" v-for="item, index in props.content?.image">
              <el-image style="width: 100px; height: 100px" :src="`${siteConfig.cdnUrl}${item}`" fit="cover"  />
            </div>
          </div>
      </div>
      <div class="info-content-item">
          <span class="label">附件:</span>
          <div class="value">
            <div class="files-item" :key="index" v-for="item, index in props.content?.files">
              <a :href="`${siteConfig.cdnUrl}${item}`" target="_blank">{{ item.split('/')[item.split('/').length - 1] }}</a>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineProps } from 'vue'
  import { useSiteConfig } from '/@/stores/siteConfig'
  const props = defineProps({
    content: Object
  })
  const siteConfig = useSiteConfig()

</script>

<style scoped lang="scss">
.info-content-item {
            display: flex; justify-content: space-between; padding: 5px 10px; align-items: center;
            .label { display: inline-block; white-space: nowrap; padding-right: 13px;}
            .value {
                .ml-2 { 
                    margin-bottom: 10px;
                    margin-right: 10px
                }
            }
            div.value {
                
            }
        }
</style>